<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle ?: '同步平台 - 同步日志'}">同步平台 - 同步日志</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar Navigation -->
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/dashboard}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/server}">
                                <i class="bi bi-server"></i> 服务器管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/database}">
                                <i class="bi bi-database"></i> 数据库管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/database}">
                                <i class="bi bi-arrow-left-right"></i> 数据库同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/file}">
                                <i class="bi bi-files"></i> 文件同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/restore}">
                                <i class="bi bi-arrow-counterclockwise"></i> 数据库恢复
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" th:href="@{/task/log}">
                                <i class="bi bi-list-check"></i> 同步日志
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <!-- Main Content -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">同步日志</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="dropdown me-2">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="taskFilter" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-filter"></i> 筛选任务
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="taskFilter">
                                <li><a class="dropdown-item" th:href="@{/task/log}">全部任务</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li th:each="t : ${tasks}">
                                    <a class="dropdown-item" th:href="@{/task/log/{id}(id=${t.id})}" th:text="${t.name}">任务名称</a>
                                </li>
                            </ul>
                        </div>
                        <button id="refreshLogs" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>
                
                <!-- Selected Task Info -->
                <div th:if="${task != null}" class="alert alert-info mb-3">
                    <h5><i class="bi bi-info-circle"></i> 当前显示任务: <span th:text="${task.name}">任务名称</span></h5>
                    <p class="mb-0">
                        <span th:if="${task.taskType == 1}" class="badge bg-primary">数据库同步</span>
                        <span th:if="${task.taskType == 2}" class="badge bg-success">文件同步</span>
                        <span th:if="${task.status == 1}" class="badge bg-success">已启用</span>
                        <span th:if="${task.status == 0}" class="badge bg-danger">已禁用</span>
                        <span th:if="${task.cronExpression != null}" class="badge bg-info" th:text="${task.cronExpression}">0 0 * * * ?</span>
                    </p>
                </div>
                
                <!-- Logs Table -->
                <div class="card">
                    <div class="card-body">
                        <div th:if="${logs == null || logs.empty}" class="alert alert-info">
                            <i class="bi bi-info-circle"></i> 没有找到同步日志记录
                        </div>
                        
                        <div th:if="${logs != null && !logs.empty}" class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>任务名称</th>
                                        <th>任务类型</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>耗时</th>
                                        <th>同步数量</th>
                                        <th>状态</th>
                                        <th>信息</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="log : ${logs}">
                                        <td th:text="${log.taskName}">任务名称</td>
                                        <td>
                                            <span th:if="${log.taskType == 1}" class="badge bg-primary">数据库同步</span>
                                            <span th:if="${log.taskType == 2}" class="badge bg-success">文件同步</span>
                                        </td>
                                        <td th:text="${#temporals.format(log.startTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</td>
                                        <td th:text="${log.endTime != null ? #temporals.format(log.endTime, 'yyyy-MM-dd HH:mm:ss') : '进行中...'}">2023-01-01 12:05:00</td>
                                        <td>
                                            <span th:if="${log.duration != null}" th:text="${log.duration / 1000.0 + ' 秒'}">5 秒</span>
                                            <span th:if="${log.duration == null}">-</span>
                                        </td>
                                        <td th:text="${log.syncCount}">100</td>
                                        <td>
                                            <span th:if="${log.status == 1}" class="badge bg-success">成功</span>
                                            <span th:if="${log.status == 0}" class="badge bg-danger">失败</span>
                                            <span th:if="${log.status == null}" class="badge bg-warning">进行中</span>
                                        </td>
                                        <td>
                                            <span th:text="${log.message != null && log.message.length() > 50 ? log.message.substring(0, 50) + '...' : log.message}">
                                                执行成功: 同步了 10 个表，共 1000 行数据
                                            </span>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-outline-info view-detail-btn" 
                                                    th:data-id="${log.id}" th:data-message="${log.message}" 
                                                    th:data-detail="${log.detailLog}">
                                                <i class="bi bi-eye"></i> 详情
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- Log Detail Modal -->
    <div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logDetailModalLabel">日志详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <h6>执行结果</h6>
                        <div id="logMessage" class="alert alert-info"></div>
                    </div>
                    <div class="mb-3">
                        <h6>详细日志</h6>
                        <pre id="logDetail" class="bg-light p-3" style="max-height: 400px; overflow-y: auto;"></pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script th:src="@{/js/script.js}"></script>
    
    <script th:inline="javascript">
        $(document).ready(function() {
            // Initialize tooltips
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            });
            
            // View log detail
            $('.view-detail-btn').on('click', function() {
                const message = $(this).data('message');
                const detailLog = $(this).data('detail');
                
                $('#logMessage').text(message || '无执行结果信息');
                $('#logDetail').text(detailLog || '无详细日志');
                
                $('#logDetailModal').modal('show');
            });
            
            // Refresh logs
            $('#refreshLogs').on('click', function() {
                location.reload();
            });
            
            // Task-specific log refresh
            const taskId = /*[[${task != null ? task.id : null}]]*/ null;
            if (taskId) {
                // Auto-refresh task-specific logs every 10 seconds if viewing a specific task
                setInterval(function() {
                    $.ajax({
                        url: /*[[@{/task/log/ajax/}]]*/ '' + taskId,
                        type: 'GET',
                        success: function(response) {
                            if (response.success) {
                                // Reload the page to refresh the logs
                                location.reload();
                            }
                        }
                    });
                }, 10000);
            }
        });
    </script>
</body>
</html> 